<template>
  <div style="min-height:100vh;">
    <!--头部-->
    <Top />
    <!--分类-->
    <div>
      <mu-container >
        <mu-flex style="margin-top:30px;width:100%;">
          <el-button style="font-size:40px;width:100%;height:100px;" @click="open = !open" type="success" plain >选择标签</el-button>
        </mu-flex>
        <mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'" style="min-width:40%;">
          <mu-list>
            <mu-list>
              <mu-list-item style="width:100%;height:80px;line-height:80px;display:flex;align-items: center;justify-content: center;margin-bottom:20px;">
                <div style="width:100%;font-size:40px; text-align:center;font-weight: bold;">共<span style="color: rgb(6, 154, 240);font-size:48px;">{{tags.length}}</span>个标签</div>
              </mu-list-item>
              <div v-for="(tag,indexTags) in tags" :key="indexTags">
                <mu-list-item style="height:100px;">
                  <el-button @click="getTag(tag.id,tag.name,tag.countTag)" type="warning" style="width:100%;height:80px;font-size:40px;" plain>{{tag.name}}</el-button>
                </mu-list-item>
              </div>
            </mu-list>
          </mu-list>
        </mu-drawer>
      </mu-container>
    </div>

    <div style="width:98%;padding:20px 0;margin:0 auto;">
      <div class="grid-content bg-purple blog_bg_left" v-loading="loading">

        <el-row :gutter="20">
          <!--已选择分类-->
<!--          <div v-if="select">-->
            <el-col :span="12">
              <div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size: 35px;">
                该标签共<span style="font-size: 43px;color: rgb(6, 154, 240);">{{total}}</span>篇文章
              </div>
            </el-col>
            <el-col :span="12">
              <div style="float: right;margin: 10px 20px 0px 0px;font-size:35px;">
                <el-tag type="warning" style="margin-right:20px;font-size:40px;">{{ nowTag }}</el-tag>
              </div>
            </el-col>
<!--          </div>-->
          <!--未选择分类-->
<!--          <div v-else>-->
<!--            <el-col :span="12">-->
<!--              <div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size: 35px;">-->
<!--                全部文章-->
<!--              </div>-->
<!--            </el-col>-->
<!--          </div>-->
        </el-row>

        <!-- 分割线 -->
        <div class="fenge"></div>

        <div>
          <div class="blog_card" v-for="(item,index) in blogData" :key="index" style="width:100%;">

<!--            <router-link :to="'/blog/'+item.id">-->
            <div @click="goToBlog(item.id)">
              <el-card :body-style="{ padding: '15px' }" style="max-width:95%;min-height:300px;" >
                <el-row :gutter="20">
                  <el-col :span="15">
                    <div>
                      <div style="font-size:40px;font-weight:bold;">{{item.title}}</div>
                      <div style="font-size: 35px;min-height:100px;">{{item.description}}</div>
                    </div>
                  </el-col>
                  <el-col :span="9">
                    <div style="width:100%;height:180px;" v-lazy-container="{ selector: 'img' }">
<!--                      <el-image-->
<!--                          style="width: 100%; height: 100%"-->
<!--                          :src="item.firstPicture"-->
<!--                      >-->
<!--                      </el-image>-->
                      <img
                          style="width: 100%; height: 100%"
                          :data-src="item.firstPicture"
                      />
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <div style="margin-top: 10px;margin-bottom:20px;">
                    <el-tag style="margin-right: 10px;font-size:30px;" ><span> {{item.flag}}</span></el-tag>
                    <el-tag style="margin-right: 10px;font-size:30px;" type="success"><span> {{item.ttype.name}}</span></el-tag>
                    <el-tag style="margin-right: 10px;font-size:30px;" type="info" v-for="tag in item.tblogTags"><span> {{tag.ttag.name}}</span></el-tag>
                  </div>
                </el-row>
                <el-row>
                  <div style="height:40px;line-height:40px;">
                    <i style="margin-left: 20px;" class="el-icon-date"><span style="font-size: 30px;"> {{item.createTime}}</span></i>
                    <i style="margin-left: 20px;" class="el-icon-view"><span style="font-size: 30px;"> {{item.views}}</span></i>
                    <i style="margin-left: 20px;" class="el-icon-chat-line-square"><span style="font-size: 30px;"> {{item.commentCount}}</span></i>
                  </div>
                </el-row>
              </el-card>
            </div>
<!--            </router-link>-->

            <el-divider></el-divider>

          </div>
        </div>

        <div style="height:100px;max-width:100%;">
          <!-- 分页 -->
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="size"
              layout="total, prev, pager, next"
              :total="total"
              :key="key"
          >
          </el-pagination>
        </div>

      </div>
    </div>

    <!--占位-->
    <div style="height:200px;"></div>
  </div>
</template>

<script>
import Top from '@/components/move/Top'
export default {
  name: 'Tag',
  components:{Top},
  data () {
    return {
      docked: false,
      open: false,
      position: 'left',
      tags:[],
      tag_id:'',
      blogData:[],
      total:1,
      currentPage:1,
      size:5,
      select: false, //是否选择了分类
      nowTag:'', //当前所选分类
      nowNum:'', //当前分类的blog数
      source:'tag', //请求来源
      page:1,
      idChange: false,
      key:0,
      loading: true
    }
  },
  // watch:{
  //   tag_id(newVal,oldVal){
  //     console.log("inputVal = " + newVal + " , oldValue = " + oldVal + ", isChange = " + this.isChange)
  //     if(newVal !== oldVal){
  //       this.isChange = true
  //       console.log("变化了 isChange = " + this.isChange)
  //     }else{
  //       this.isChange = false
  //       console.log("没有改变 isChange = " + this.isChange)
  //     }
  //   }
  // },
  mounted() {
    this.getAllTag()
    this.initBlog()
    this.key = this.$store.getters.getTagVal
  },
  methods:{
    //查询所有分类
    getAllTag(){
      const _this = this
      this.axios.get('/tag/getAllTag').then(resp=>{
        // console.log("---------")
        // console.log(resp)
        _this.tags = resp.data.obj

        if(this.$store.getters.getTagId == ''){ //第一次进入
          // console.log("第一次执行")
          this.changeTagIdFun(resp.data.obj[0].id) //首次进入显示第一个分类的数据
        }
        this.nowTag = resp.data.obj[0].name

      })
    },
    //获取分类数据
    getTag(id,tag,num){
      // console.log(id)
      this.tag_id = id
      this.changeTagIdFun(id)
      this.idChange = true //id发生了更改
      this.initBlog()
      this.select = true
      this.open = false
      this.nowTag = tag
      this.nowNum = num
    },
    //初始化博客数据
    initBlog(){
      const _this = this

      if(!this.idChange){ //还是原来的分类
        this.page = this.$store.getters.getTagVal //没改变分类请求原来的页码
        this.currentPage = this.$store.getters.getTagVal //当前页也返回原来页码
        // console.log(this.page,this.currentPage)
      }else{ //分类发生了改变
        this.page = 1
        this.currentPage = 1
        this.changeTagValFun(this.page)
      }

      this.axios.get('/blog/vuefindByPage?current=' + _this.page + '&size=' + _this.size + '&tags_id=' + this.$store.getters.getTagId + '&source=' + _this.source).then(resp=>{
        // console.log("----------------")
        // console.log(resp)
        // console.log(resp.data.obj.blogList[0].tblogTags[0].ttag.name)
        _this.blogData = resp.data.obj.blogList
        _this.total = resp.data.obj.totals
        _this.nowTag = resp.data.obj.blogList[0].tblogTags[0].ttag.name

        this.idChange = false //初始化完就变回false
        this.loading = false
      })
    },

    goToBlog(id){
      this.$loading({
        text:'玩命加载中，请稍等...',
      });

      this.$router.push('/blog/'+id)
      this.changeSourceFun("tag")
    },

    // 翻页后滚动条回到页面顶端
    scrollTop(selector) {
      let element = selector && document.querySelector(selector) || window;
      element.scrollTo(0, 0);
    },

    //分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.loading = true
      this.axios.get('/blog/vuefindByPage?current=' + val + '&size=' + this.size + '&tags_id=' + this.$store.getters.getTagId + '&source=' + this.source).then(resp=>{
        // console.log(resp)
        this.loading = false

        this.blogData = resp.data.obj.blogList
        // this.total = resp.data.obj.totals

        //找到你想要滚到顶部的元素scrollTop=0
        this.scrollTop(".wrapper");

        //将分类转栏中的页码传到store中
        this.changeTagValFun(val)
      })
    },

    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },

    //  改变store中tagVal的值
    changeTagValFun(val){
      this.$store.dispatch("changeTagValFun",val)
    },

    // 改变store中source的值
    changeSourceFun(source){
      this.$store.dispatch("changeSourceFun",source)
    },

    //  改变store中tagId的值
    changeTagIdFun(id){
      this.$store.dispatch("changeTagIdFun",id)
    },

  }
}
</script>

<style scoped>
.box-card {
  width:95%;
  height:300px;
  margin:0 auto;
}

.content{
  display: flex;
}

.left{
  width:70%;
}

.blog-content{
  font-size:30px;
  height:150px;
  width:95%;
  /*background-color: red;*/
}

.right{
  /*background-color: red;*/
  width:40%;
}

.img img{
  width:100%;
  height:180px;
}

.title{
  font-size: 50px;
  font-weight:bold;
}

.blog-info{
  display: flex;
}

.info-item{
  font-size: 30px;
  margin-right: 20px;
}

.tag{
  margin-top: 10px;
}

.pagination{
  text-align:center;
}

/* 分割线 */
.fenge{ height:3px; border:none; border-top:3px solid  #1eb9e0;margin-bottom:20px;}

.blog_bg_left{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 95%;
  min-height: 500px;
  margin: 0 auto;
}

.blog_card{
  width: 95%;
  margin: 2%;
}

</style>